import React, { Component } from "react";
import { RadarChartOutlined, GlobalOutlined, ReadOutlined } from '@ant-design/icons'
import './index.scss'

const head = [
    { key: 0, titile: "基本信息", icon: ReadOutlined, isSelect: true },
]

interface props {
    changeHeader: any
}

export default class Header extends Component<any, props>{

    isChange = (key: any) => {
        this.props.changeHeader(key)
        head.forEach((item) => {
            if (key === item.key) {
                item.isSelect = true
            } else {
                item.isSelect = false
            }
        })
    }

    render() {
        return <div className="header">
            {
                head.map((item) => {
                    return <div
                        key={item.titile}
                        onClick={() => { this.isChange(item.key) }}
                    >
                        <span style={{ color: item.isSelect ? "#5cffe8" : "white" }}><item.icon /></span>
                        <span style={{ color: item.isSelect ? "#5cffe8" : "white" }}>{item.titile}</span>
                    </div>
                })
            }
        </div >;
    }
}
